<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '../stores/user'
import { getValidateCode, login } from '../api/login'
// import { useRouter } from 'vue-router'
import md5 from 'js-md5'
import { encode } from 'js-base64'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()

const loading = ref(false)

const formRef = ref()

const form = reactive<any>({
  phone: '',
  password: '',
  code: ''
})

const rules = reactive<any>({
  phone: [
    {
      required: true,
      message: '请输入手机号',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur'
    }
  ]
})

// 获取验证码
const codeInfo: any = ref({
  sessionId: '',
  img: ''
})

const getCode = async () => {
  let res = await getValidateCode({})
  codeInfo.value = res
}

const handleLogin = () => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      if (!agree.value) {
        ElMessage({
          message: '请阅读并同意底部协议',
          type: 'warning',
          grouping: true
        })
        return
      }
      loading.value = true
      const info = {
        phone: form.phone,
        password: encode(md5(form.password)),
        code: form.code,
        sessionId: codeInfo.value.sessionId,
        loginType: 'web'
      }
      login(info)
        .then((data: any) => {
          if (data) {
            userStore.login(data)
          }
        })
        .catch(() => {
          getCode()
          loading.value = false
        })
    }
  })
}

const keyDownFun = (e: any) => {
  if (e.key == 'Enter') {
    handleLogin()
  }
}

onMounted(() => {
  window.addEventListener('keydown', keyDownFun)
  getCode()
  console.log(encode(md5('123456')))
})

onUnmounted(() => {
  window.removeEventListener('keydown', keyDownFun, false)
})

const agree = ref(false)

const onPrivate = () => {
  window.open('https://www.flowersyn.com/privacy-pc')
}

const onService = () => {
  window.open('https://www.flowersyn.com/agreement-pc')
}
</script>

<template>
  <div class="login-form-wrapper">
    <div class="welcome">您好，欢迎登录！</div>
    <el-form ref="formRef" :model="form" :rules="rules">
      <div class="form-input-container">
        <div class="input-container">
          <el-form-item prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号">
              <template #prefix>
                <SvgIcon icon="login-user"></SvgIcon>
                <div class="login-input-icon-line"></div>
              </template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <div class="form-input-container">
        <div class="input-container">
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" show-password>
              <template #prefix>
                <SvgIcon icon="login-pwd"></SvgIcon>
                <div class="login-input-icon-line"></div>
              </template>
            </el-input>
          </el-form-item>
        </div>
      </div>
      <div class="code-container form-input-container">
        <div class="input-container">
          <el-form-item prop="code">
            <el-input v-model="form.code" placeholder="请输入验证码">
              <template #prefix>
                <SvgIcon icon="login-code"></SvgIcon>
                <div class="login-input-icon-line"></div>
              </template>
            </el-input>
          </el-form-item>
          <div class="code-img-container" @click="getCode">
            <img :src="`data:image/;base64,${codeInfo.img}`" alt="" />
          </div>
        </div>
      </div>
    </el-form>
    <div class="protocol-container">
      <el-checkbox v-model="agree" :true-value="true" :false-value="false" />
      <div class="text-container">
        <div class="tip">已阅读并同意</div>
        <div class="protocol-text" @click="onPrivate">《隐私保护政策》</div>
        <div class="protocol-text" @click="onService">《服务协议》</div>
      </div>
    </div>
    <div class="submit-container">
      <el-button type="primary" round :loading="loading" @click="handleLogin">
        <span class="submit-text">登&nbsp;&nbsp;录</span>
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-form-wrapper {
  @include rect(auto, auto);
  @include flex(column, center, center);
  .welcome {
    width: 350px;
    font-family: 'PingFangSC-Medium';
    font-size: 24px;
    font-weight: bold;
    color: #474a59;
    margin-bottom: 16px;
  }
  .code-container {
    .input-container {
      position: relative;
      .code-img-container {
        width: 100px;
        position: absolute;
        top: 8px;
        right: 12px;
        cursor: pointer;
        img {
          width: 100px;
        }
      }
    }
  }
  .submit-container {
    --el-border-radius-round: 4px;
    .el-button {
      height: 40px;
      width: 350px;
    }
    .submit-text {
      font-family: 'PingFangSC-Medium';
      font-weight: 500;
      font-size: 16px;
      color: rgba(255, 255, 255, 1);
    }
  }
  .form-input-container {
    @include flex(column, flex-start, flex-start);
    .input-container {
      width: 350px;
      --el-component-size: 40px;
      --el-border-radius-base: 4px;
      .login-input-icon-line {
        height: 16px;
        border-left: var(--el-input-border);
        margin-left: 8px;
      }
      .el-input__wrapper {
        .svg-icon {
          color: #575f6c;
        }
      }
      .el-form-item:not(.is-error) {
        .el-input__wrapper {
          &.is-focus {
            .svg-icon {
              color: var(--theme-color);
            }
          }
        }
      }
      .el-form-item.is-error {
        .el-input__wrapper {
          .svg-icon {
            color: var(--el-color-danger);
          }
          &.is-focus {
            .svg-icon {
              color: var(--el-color-danger);
            }
          }
        }
      }
    }
  }
  .form-input-container + .form-input-container {
    margin-top: 12px;
  }
  .protocol-container {
    @include flex(row, flex-start, center);
    width: 350px;
    margin-top: 22px;
    .text-container {
      @include flex(row, flex-start, center);
      margin-left: 7px;
      .tip {
        font-family: 'PingFangSC-Bold';
        font-size: 12px;
        color: #90939a;
      }
      .protocol-text {
        font-family: 'PingFangSC-Bold';
        font-size: 12px;
        color: var(--theme-color);
        cursor: pointer;
      }
    }
  }
}
</style>
